<template>
  <div class="back">
    <!--头部logo图片-->
    <div style="height: 122px; line-height: 60px;margin-bottom: 2px;text-align: center">
      <span style="font-family: 华文行楷;font-size: 50px;margin-top: 30px">福州历史文化博物馆</span>
      <br>

      <span style="font-family: 'Times New Roman';font-size: 20px;">Fuzhou Historical and Cultural Museum</span>
    </div>

    <el-dialog  title="个人信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="姓名"  >
          <el-input  v-model="form.username" ></el-input>
        </el-form-item>
        <el-form-item label="电话" >
          <el-input v-model="form.phone" ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" >
          <el-input v-model="form.email" ></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="head">
          <el-upload
              class="avatar-uploader"
              :action="'http://localhost:9090/api/file/upload?token=' + this.admin.token"
              :show-file-list="false"
              :on-success="handleCoverSuccess"
          >

            <img v-if="form.head" :src="form.head " class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">修 改</el-button>
      </div>
    </el-dialog >
    <el-dialog title="留言消息" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="parentId" label="留言景点" width="150"></el-table-column>
        <el-table-column property="content" label="留言信息" width="200"></el-table-column>
        <el-table-column property="createtime" label="留言时间"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="FormVisible" width="30%">
      <el-form :model="pass" label-width="100"px ref="formRef" :rules="rules">
        <el-form-item label="旧密码" prop="password">
          <el-input v-model="pass.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input v-model="pass.newPass" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="FormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePass">确 定</el-button>
      </div>
    </el-dialog>


    <!--导航条-->
    <el-menu   router
               class="el-menu-demo"
               mode="horizontal"
               background-color="#545c64"
               text-color="#fff"
               active-text-color="#ffd04b">
      <el-menu-item style="font-size: 20px;margin-left: 620px ;color: white" index="/hello">首页</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/going_fuzhou">走进福州</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/zixun_fuzhou">福州资讯</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/history">发展历史</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/tese_wenhua">特色文化</el-menu-item>
      <el-menu-item style="font-size: 20px" index="/lvyou_zhinan">旅游指南</el-menu-item>
      <div v-if="admin.username==null" style="margin-left: 1830px;margin-top: 10px">
        <el-button @click="$router.push('/login')">登录</el-button>
      </div>
      <div style="margin-top:10px;flex: 1;text-align: right ;padding-right: 20px" >
        <div v-if="admin.username!=null">
          <el-dropdown size="medium">
            <span class="el-dropdown-link" style="cursor: pointer">
              <el-avatar :src="form.head"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="dialogFormVisible=true">个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="dialogTableVisible=true" >我的留言</el-dropdown-item>
              <el-dropdown-item @click.native="FormVisible=true" >修改密码</el-dropdown-item>
              <el-dropdown-item v-if="admin.identity===0" ><div @click="$router.push('/home')">后台管理</div></el-dropdown-item>
              <el-dropdown-item ><div style="width: 50px; text-align: center" @click="logout">退出</div></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-menu>
    <div style="background-color: white; margin-left:500px; width:900px">

      <el-card style="font-family: 楷体;"   >
        <a style="margin-left: 300px;font-size: 50px ;font-weight: bolder">特 色 文 化</a>
        <el-divider></el-divider>
        <img style="width: 300px;margin-left: 70px" :src="text[0].image">
        <img style="width: 300px;margin-left: 150px" :src="text[1].image">
        <br>
        <div style="font-size: 30px;cursor:pointer;">
        <span  style="margin-left: 150px ; " @click=goWithId0>{{text[0].name}}</span>
        <span style="margin-left: 320px"@click=goWithId1>{{text[1].name}}</span>
        </div>
        <br>
        <img style="width: 300px;margin-left: 70px;margin-top: 30px" :src="text[2].image">
        <img style="width: 300px;margin-left: 150px" :src="text[3].image">
        <br>
        <div style="font-size: 30px">
        <span style="margin-left: 130px"@click=goWithId2>{{text[2].name}}</span>
        <span style="margin-left: 300px"@click=goWithId3>{{text[3].name}}</span>
        </div>

      </el-card>
    </div>
    <!--底部-->
    <div>
      <el-card style="width: 1900px;background-color:rgba(30, 144, 255,0.1);border: none;">
        <div style=" text-align: center">

          <span style="font-size: 30px;font-weight:bolder ;color: black;">福 州 历 史 文 化 博 物 馆</span>
          <br>
          <span style="font-family: 'Times New Roman';margin-left: 45px"> Fuzhou Historical and Cultural Museum </span>
          <br>
          <span>  </span>
          <br>
          <span>有任何疑问请联系管理员</span>
          <br>
          <br>
          <span style="font-size: large;font-weight:bolder;color: black;">管理员电话:</span>
          <span>  </span>
          <span>123-456789</span>
          <br>
          <br>
          <b style="font-family: 楷体;">福州历史  版权所有©</b>


        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
import request from "@/util/request";
import Cookies from "js-cookie";
export default {
  name: "tese_wenhua",
  data(){
    return{
      text:{},
      admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
      dialogFormVisible: false,
      FormVisible: false,
      dialogTableVisible:false,
      formLabelWidth: '120px',
      form:{
        username: '',
        phone:'',
        email:''
      },
      pass:{
        username:""
      },
      rules: {
        newPass: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min:6,max:12,message: "长度在6-12个字符",trigger: 'blur'}
        ]
      }
    }

  },
  created() {
    this.load()
    const id = this.admin.id
    request.get('/admin/' + id).then(res => {
      this.form = res.data;

    })
    this.mes()

  },
  methods:{
    goWithId0(){
      const id=this.text[0].id;
      this.$router.push({ name: 'tanshishan', params: { id } });
    },
    goWithId1(){
      const id=this.text[1].id;
      this.$router.push({ name: 'tanshishan', params: { id } });
    },
    goWithId2(){
      const id=this.text[2].id;
      this.$router.push({ name: 'tanshishan', params: { id } });
    },
    goWithId3(){
      const id=this.text[3].id;
      this.$router.push({ name: 'tanshishan', params: { id } });
    },
    load(){
      request.get("/wenhua/all").then(res=>{
        if (res.code=="200"){
          this.text=res.data
          console.log(this.text)
        }
      })
    },
    mes() {
      const _id = this.admin.id//当前用户id
      request.get("/travel/usermes/" + _id).then(res => {
        if (res.code == "200") {
          this.gridData = res.data
        }
      })
    },
    update(){
      request.put("/admin/update",this.form).then(res=>{
        if (res.code=="200"){
          this.dialogFormVisible=false;
          this.$notify.success("修改成功")

        }else{
          this.$notify.error(res.msg)
        }
      })
    },
    logout(){
      //退出时清空cookie
      Cookies.remove('admin')
      this.$router.push("/login")
    },
    savePass(){
      this.pass.username=this.admin.username;
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          request.put("/admin/pass",this.pass).then(res=>{
            if (res.code=='200') {
              this.$notify.success("修改成功")
              this.FormVisible = false
              Cookies.remove("admin")
              this.$router.push("/login")
            }else{
              this.$notify.error(res.msg)
            }
          })
        }
      })
    },
  }
}
</script>

<style scoped>
.back{
  background-image:  url("../../assets/back.jpg") ;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;

}
span:hover{
  text-decoration:underline;
}
</style>